<template>
  <el-dialog v-model="dialogVisible" title="导入成员" width="700">
    <div class="label">从以下项目中选择成员导入</div>
    <el-select v-model="currentProject" placeholder="Select" style="width: 100%" @change="handleSelect">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>

    <div class="label" style="margin-top: 16px">选择成员</div>
    <el-empty description="暂无成员" v-if="memberList.length === 0"/>
    <el-checkbox-group v-model="checkList" class="member-checkbox" v-else>
      <el-checkbox
        value="checked1"
        label="Option1"
        size="large"
        border
        v-for="i in memberList"
      >
        <div style="display: flex; align-items: center; gap: 5px">
          <img src="@/assets/1.png" />
          <span>张三丰</span>
        </div>
      </el-checkbox>
    </el-checkbox-group>

    <div class="label" style="margin-top: 16px">设置当前角色</div>
    <el-select v-model="currentRole" placeholder="Select" style="width: 100%">
      <el-option
        v-for="item in roleOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
  import { ref, onMounted } from "vue";
  import { useRoute} from 'vue-router'
  import { projectListAJAX, projectMemberListAJAX } from "@/api/pm/member.ts";
  import { projectRoleListAJAX } from "@/api/pm/role.ts";

  const route = useRoute()

  const options = ref([]);
  const roleOptions = ref([]);

  const memberList = ref( [])

  const currentProject = ref('');
  const currentRole = ref('');

  onMounted(async () => {
    const result = await projectListAJAX({
      pageNo: 1,
      pageSize: 1000,
    });
    options.value = result.result.map((item: any) => {
      return {
        value: item.id,
        label: item.name.zh_CN,
      };
    });

    const roleResult = await projectRoleListAJAX(route.query.projectId as string);
    console.log('roleResult', roleResult)
    roleOptions.value = roleResult.filter((item: any) => item.id !== 'ALL').map((item: any) => {
      return {
        value: item.id,
        label: item.name.zh_CN,
      };
    });
  });

  const handleSelect = async (value: any) => {
    const result = await projectMemberListAJAX(value, 'ALL', {
      pageNo: 1,
      pageSize: 1000,
    });
    memberList.value = result.result.map((item: any) => {
      return {
        id: item.id,
        name: item.name,
      };
    });
  };

  const dialogVisible = defineModel();

  const checkList = ref(["checked1"]);
</script>
<style scoped lang="scss">
  .label {
    font-weight: 500;
    color: #141414;
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 6px;
  }

  .member-checkbox {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    img {
      width: 30px;
      height: 30px;
    }
    :deep(.el-checkbox.is-bordered.el-checkbox--large) {
      margin: 0px;
      border: none;
      background-color: #f8f8f8;
    }
  }
</style>
